<template>
  <div class="container">
    <app-header :needBack="true" :title="'报道详情'">
      <template slot="right-btn">
        <div class="share-btn" @click="showShare">
          <i class="iconfont icon-share"></i>
        </div>
      </template>
    </app-header>
    <div class="article">
      <h1 class="article-title text-primary">{{article.title}}</h1>
      <p class="article-row flex align-items-center text-secondary"><span class="article-source">{{article.source}}</span>|<span class="article-time">{{article.postedAt | parseTime}}</span></p>
      <p class="article-row flex align-items-center article-info">
        <span>所属板块：</span><span>{{propertyText}}</span>
      </p>
      <p class="article-row flex align-items-center article-info">
        <span>标签：</span><span class="article-label" v-for="(keyword, keyIndex) in article.generalKeywordsShow" :key="keyIndex">{{keyword}}</span></p>
      <p class="article-text" v-html="article.content"></p>
      <p class="article-row article-info text-wrap">原文链接：<span class="article-link" @click="openLink(article.url)">{{article.url}}</span></p>
    </div>
    <div class="collapse" :class="{'open': relateFlag}">
      <div class="collapse-top flex align-items-center justify-content-space-between" @click="toggle('relateFlag')">
        <h3>关联推荐</h3>
        <i class="triangle"></i>
      </div>
      <div class="noData" v-show="relateFlag && noRelate">暂无相关内容</div>
      <ul class="collapse-list" v-show="relateFlag">
        <li class="collapse-item" v-for="(item, index) in relateList" :key="index">
          <p class="collapse-time">{{item.postedAt | parseTime('yyyy-MM-dd')}}</p>
          <p class="collapse-title" @click="openLink(item.url)">{{item.title | parseText(22)}}</p>
          <p class="collapse-summary">{{item.summary | parseText(50)}}</p>
        </li>
      </ul>
    </div>
    <div class="collapse" :class="{'open': policyFlag}">
      <div class="collapse-top flex align-items-center justify-content-space-between" @click="toggle('policyFlag')">
        <h3>政策溯源</h3>
        <i class="triangle"></i>
      </div>
      <div class="noData" v-show="policyFlag && noPolicy">暂无相关内容</div>
      <ul class="collapse-list" v-show="policyFlag">
        <li class="collapse-item" v-for="(item, index) in policyList" :key="index">
          <p class="collapse-time">{{item.postedAt | parseTime('yyyy-MM-dd')}}</p>
          <p class="collapse-title" @click="openLink(item.crawlUrl)">{{item.title | parseText(22)}}</p>
          <p class="collapse-summary">{{item.crawlSummary | parseText(50)}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import AppHeader from '@/components/common/AppHeader'
export default {
  data () {
    return {
      article: {},
      propertyText: '',
      relateFlag: false,
      noRelate: false,
      policyFlag: false,
      noPolicy: false,
      relateList: [],
      policyList: []
    }
  },
  methods: {
    getDetail () {
      this.$store.commit('setLoading', true)
      this.article = {}
      this.$http.get('/main/getHeadlineById', {
        id: this.id,
        ids: this.id
      })
        .then(res => {
          this.$store.commit('setLoading', false)
          const data = res.data
          if (data.length) {
            this.article = data[0]
            // 所属板块
            let propertyText = ''
            if (this.article.extractedInfo) {
              for (let m = 0; m < this.article.extractedInfo.length; m++) {
                if (this.article.moduleSet.toString().indexOf(this.article.extractedInfo[m].extractedDimension) > -1) {
                  propertyText += this.article.extractedInfo[m].extractedProperty + ' '
                }
              }
            }
            this.propertyText = propertyText
          } else {
            this.article = {}
            this.propertyText = ''
          }
        })
    },
    toggle (type) {
      this[type] = !this[type]
    },
    showShare () {
      const link = this.article.url
      this.$store.commit('showShare', link)
    },
    getRelateList () {
      this.relateList = []
      this.relateFlag = false
      this.noRelate = false
      this.$http.get('/main/getCorrelation', {
        id: this.id,
        ids: this.id
      })
        .then(res => {
          const data = res.data
          this.relateList = data.slice(0)
          if (this.relateList.length === 0) {
            this.noRelate = true
          }
        })
    },
    getPolicyList () {
      this.policyList = []
      this.policyFlag = false
      this.$http.get('/main/getConsult', {
        id: this.id,
        ids: this.id
      })
        .then(res => {
          const data = res.data
          this.policyList = data.slice(0)
          if (this.policyList.length === 0) {
            this.noPolicy = true
          }
        })
    },
    openLink (url) {
      this.$router.push({
        name: 'OpinionView',
        query: {
          url
        }
      })
    }
  },
  activated () {
    this.getDetail()
    this.getRelateList()
    this.getPolicyList()
  },
  computed: {
    id () {
      return this.$route.query.id || ''
    }
  },
  components: {
    AppHeader
  }
}
</script>

<style lang="less" scoped>
  @import "../../assets/less/default.less";
  .article {
    box-sizing: border-box;
    padding: 0.3rem;
    font-size: 0.28rem;
    * {
      max-width: 100%;
    }
    .article-title {
      font-size: 0.48rem;
      margin-bottom: 0.2rem;
    }
    .article-row {
      margin-bottom: 0.2rem;
    }
    .article-source {
      margin-right: 0.2rem;
    }
    .article-time {
      margin-left: 0.2rem;
    }
    .article-text {
      font-size: 0.32rem;
      color: #333333;
      margin-bottom: 0.2rem;
    }
    .article-info {
      color: #6c7880;
    }
    .article-label {
      color: @blue;
      margin-right: 0.2rem;
    }
    .article-link {
      color: @blue;
      text-decoration: underline;
    }
  }
  .triangle {
    @h: 0.15rem;
    width: 0;
    height: 0;
    border-right: @h solid transparent;
    border-top: @h solid #54698d;
    border-left: @h solid transparent;
  }
  .collapse {
    box-sizing: border-box;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    border-top: 1px solid #dfe3e6;
    .triangle {
      transition: 0.5s transform;
    }
    &.open {
      .triangle {
        transform: rotate(180deg);
      }
    }
    .collapse-top {
      height: 0.85rem;
      font-size: 0.28rem;
      color: #3d3d3d;
    }
    @color: #c7c7cc;
    .collapse-list {
      width: 100%;
      position: relative;
      &:after {
        content: '';
        display: block;
        width: 1px;
        height: 100%;
        background-color: @color;
        position: absolute;
        left: 0.15rem;
        top: 0;
      }
    }
    .collapse-item {
      box-sizing: border-box;
      padding-left: .45rem;
      font-size: 0.28rem;
      color: #333333;
    }
    .collapse-time {
      position: relative;
      &:before {
        @width: 0.2rem;
        content: '';
        display: block;
        position: absolute;
        top: @width / 2;
        left: -(@width + 0.6) / 2;
        width: @width;
        height: @width;
        border-radius: 50%;
        background-color: @color;
      }
    }
    .collapse-time,
    .collapse-title {
      margin-bottom: 0.1rem;
    }
    .collapse-summary {
      color: #bebebe;
      margin-bottom: 0.3rem;
    }
  }
  .noData {
    color: #6c7880;
    font-size: 0.28rem;
    padding-bottom: .1rem;
  }
</style>
